<template>
	<div id="addContract" class="bill">
		<div class="contentRight">
			<div class="title">合同信息</div>
			<div class="meTable">
				<div class="meTableHead flex-alignCenter">基本信息</div>
				<div class="meTableContent">
					<div class="tr flex-row">
						<div class="cell flex-row">
							<div class="key">
								合同号
								<span class="red">*</span>
							</div>
							<div class="value">
								<el-input v-model="submitArray.contractCode" size="small" />
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">编号</div>
							<div class="value">
								<el-input v-model="submitArray.code" placeholder="默认不用填写" size="small" />
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">
								公司分组名称
								<span class="red">*</span>
							</div>
							<div class="value">
								<el-select @change="companyGroupNameChange" clearable size="small" filterable placeholder="" v-model="submitArray.companyGroupName">
									<el-option v-for="item in selectAllList.companyGroupNameList" :key="item" :label="item" :value="item">
									</el-option>
								</el-select>
							</div>
						</div>
					</div>
					<div class="tr flex-row">
						<div class="cell flex-row">
							<div class="key">
								公司名称
								<span class="red">*</span>
							</div>
							<div class="value">
								<el-select clearable size="small" filterable placeholder="" v-model="submitArray.companyName">
									<el-option v-for="item in selectAllList.companyNameList" :key="item" :label="item" :value="item">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">合同签订日期 <span class="red">*</span></div>
							<div class="value">
								<el-date-picker v-model="submitArray.contractSignedDate" type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd">
								</el-date-picker>
							</div>
						</div>

						<div class="cell flex-row">
							<div class="key">金额</div>
							<div class="value">
								<el-input type="number" v-model="submitArray.amount" size="small" />
							</div>
						</div>
					</div>
					<div class="tr flex-row">
						<div class="cell flex-row">
							<div class="key">币种</div>
							<div class="value">
								<el-select clearable size="small" filterable placeholder="" v-model="submitArray.currency">
									<el-option v-for="item in $store.state.typeAllList['币种']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="cell flex-row" v-if="submitArray.type == '国际'">
							<div class="key">原产地国</div>
							<div class="value">
								<el-select multiple clearable size="small" filterable placeholder="" v-model="submitArray.originalCountry">
									<el-option v-for="item in $store.state.typeAllList['原产地国']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">付款方式</div>
							<div class="value">
								<el-select multiple clearable size="small" filterable placeholder="" v-model="submitArray.paymentType">
									<el-option v-for="item in $store.state.typeAllList['付款方式']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</div>
					</div>
					<div class="tr flex-row" v-if="submitArray.type == '国际'">
						<div class="cell flex-row">
							<div class="key">价格条款</div>
							<div class="value">
								<el-select clearable @change="preInsuranceStatusChange" size="small" filterable placeholder="" v-model="submitArray.priceClause">
									<el-option v-for="item in $store.state.typeAllList['价格条款']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">装货港</div>
							<div class="value">
								<el-select multiple clearable size="small" filterable placeholder="" v-model="submitArray.loadingPort">
									<el-option v-for="item in $store.state.typeAllList['装货港']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">最迟装运期</div>
							<div class="value">
								<el-date-picker v-model="submitArray.loadingLatestDate" type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd">
								</el-date-picker>
							</div>
						</div>
					</div>
					<div class="tr flex-row" v-if="submitArray.type == '国际'">
						<div class="cell flex-row">
							<div class="key">目的港</div>
							<div class="value">
								<el-select multiple clearable size="small" filterable placeholder="" v-model="submitArray.deliveryPort">
									<el-option v-for="item in $store.state.typeAllList['目的港']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">贸易方式</div>
							<div class="value">
								<el-select @change="preInsuranceStatusChange" clearable size="small" filterable placeholder="" v-model="submitArray.tradeType">
									<el-option v-for="item in $store.state.typeAllList['贸易方式']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">预保状态</div>
							<div class="value">
								<el-select clearable size="small" filterable placeholder="" v-model="submitArray.preInsuranceStatus" disabled>
									<el-option v-for="item in selectAllList.YBZT_List" :key="item" :label="item" :value="item">
									</el-option>
								</el-select>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="meTable" style="margin-top: 20px" v-if="type == 'edit'">
				<div class="meTableHead flex-alignCenter">其他信息</div>
				<div class="meTableContent">
					<div class="tr flex-row">
						<div class="cell flex-row">
							<div class="key">扣尺方法</div>
							<div class="value">
								<el-select clearable size="small" filterable placeholder="" v-model="submitArray.deductionMethod">
									<el-option v-for="item in $store.state.typeAllList['扣尺方法']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">合同电子文件</div>
							<div class="value">
								<el-button size="small" type="primary" @click="mulitpleUpload('contractAttachmentsJson')">{{
                    submitArray.contractAttachmentsJson.length
                      ? "编辑附件"
                      : "上传附件"
                  }}</el-button>
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">审批书</div>
							<div class="value">
								<el-button size="small" type="primary" @click="mulitpleUpload('contractApproveBookJson')">{{
                    submitArray.contractApproveBookJson.length
                      ? "编辑附件"
                      : "上传附件"
                  }}</el-button>
							</div>
						</div>
					</div>
					<div class="tr flex-row">
						<div class="cell flex-row">
							<div class="key">浮动比例</div>
							<div class="value">
								<el-input type="number" v-model="submitArray.floatRate" size="small" />
							</div>
						</div>
					</div>
					<div class="tr flex-row" v-if="submitArray.credit">
						<div class="cell flex-row">
							<div class="key">开证银行</div>
							<div class="value">
								{{ submitArray.credit.bankName }}
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">开证金额</div>
							<div class="value">
								{{ submitArray.credit.amount }}
							</div>
						</div>
						<div class="cell flex-row">
							<div class="key">开证信用证有效期</div>
							<div class="value">
								{{ submitArray.credit.validityPeriod }}
							</div>
						</div>
					</div>
					<div class="tr flex-row">
						<div class="cell flex-row">
							<div class="key">备注</div>
							<div class="value">
								<el-input type="textarea" v-model="submitArray.remarks" placeholder="" size="small" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flex-row" v-if="type == 'edit'">
				<!-- 单据要求列表 -->

				<div class="addContract-block" style="width: 49%; margin-right: 2%">
					<div class="meTableHead flex-alignCenter flex-between">
						<div>单据要求</div>
						<div class="flex-center cursor" style="color: #298ff7" @click="addList('contractBillRequireJson')">
							<img src="@/assets/icon/add.png" class="button-icon" alt />新增
						</div>
					</div>
					<el-table :data="submitArray.contractBillRequireJson" style="width: 100%" border>
						<el-table-column align="center" prop="userName" label="单据类型">
							<template slot-scope="scope">
								<div>
									<el-select clearable size="small" filterable placeholder="" v-model="scope.row.type">
										<el-option v-for="item in $store.state.typeAllList['单据类型']" :key="item.id" :label="item.name" :value="item.name">
										</el-option>
									</el-select>
								</div>
							</template>
						</el-table-column>

						<el-table-column align="center" prop="userName" label="单据要求">
							<template slot-scope="scope">
								<div>
									<el-input type="textarea" v-model="scope.row.remarks" placeholder="" size="small" />
								</div>
							</template>
						</el-table-column>

						<el-table-column align="center" label="操作" v-if="$store.state.operateShow" width="200px" fixed="right">
							<template slot-scope="scope">
								<div class>
									<div @click="del('contractBillRequireJson', scope.$index)" class="clickText">
										删除
									</div>
								</div>
								<!-- <el-button @click="del('list2',scope.row.guid)" slot="reference">删除</el-button> -->
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 单据要求列表end -->

				<!-- 其他条款列表 -->

				<div class="addContract-block" style="width: 49%">
					<div class="meTableHead flex-alignCenter flex-between">
						<div>其他条款</div>
						<div class="flex-center cursor" style="color: #298ff7" @click="addList('contractOtherClauseJson')">
							<img src="@/assets/icon/add.png" class="button-icon" alt />新增
						</div>
					</div>
					<el-table :data="submitArray.contractOtherClauseJson" style="width: 100%" border>
						<el-table-column align="center" prop="userName" label="其他条款类型">
							<template slot-scope="scope">
								<div>
									<el-input type="text" v-model="scope.row.type" placeholder="" size="small" />
								</div>
							</template>
						</el-table-column>

						<el-table-column align="center" prop="userName" label="内容">
							<template slot-scope="scope">
								<div>
									<el-input type="textarea" v-model="scope.row.remarks" placeholder="" size="small" />
								</div>
							</template>
						</el-table-column>

						<el-table-column align="center" label="操作" v-if="$store.state.operateShow" width="200px" fixed="right">
							<template slot-scope="scope">
								<div class>
									<div @click="del('contractOtherClauseJson', scope.$index)" class="clickText">
										删除
									</div>
								</div>
								<!-- <el-button @click="del('list2',scope.row.guid)" slot="reference">删除</el-button> -->
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 其他条款列表end -->
			</div>
			<div class="addContract-block" v-if="type == 'edit'&&submitArray.status != '已确认'">
				<!-- 商品列表 -->
				<div class="flex-between" style="margin-bottom: 10px">
					<div></div>
					<div class="flex-row">
						<el-button style="margin-left: 10px" size="small" type="warning" @click="import_template_contract">
							<div class="flex-center">
								<img src="@/assets/icon/dr.png" class="button-icon" alt />
								下载导入模板
							</div>
						</el-button>
						<el-upload style="margin-left: 10px" class="upload-demo" name="file" :action="$store.state.baseUrl + '/purchase/contract/importGoods'" :headers="{ token: $store.state.token }" :show-file-list="false" :on-success="handleAvatarSuccess" multiple :http-request="importGoods_contract">
							<el-button size="small" type="warning">
								<div class="flex-center">
									<img src="@/assets/icon/dr.png" class="button-icon" alt />
									导入商品
								</div>
							</el-button>
						</el-upload>
					</div>
				</div>
				<div class="meTableHead flex-alignCenter flex-between">
					<div>合同商品列表</div>

					<div class="flex-center cursor" style="color: #298ff7" @click="addList('contractGoodsDTOList')">
						<img src="@/assets/icon/add.png" class="button-icon" alt />新增
					</div>
				</div>
				<el-table :data="submitArray.contractGoodsDTOList" style="width: 100%" border show-summary :summary-method="getSummaries">
					<el-table-column align="center" width="100" prop="userName" label="商品类型">
						<template slot-scope="scope">
							<div>
								<el-select clearable size="small" filterable placeholder="" v-model="scope.row.goodsType">
									<el-option v-for="item in $store.state.typeAllList['商品类型']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="userName" label="商品名称" :width="flexColumnWidth('goodsName',submitArray.contractGoodsDTOList,'max','select')">
						<template slot-scope="scope">
							<div>
								<el-select style="width:100%" clearable size="small" filterable placeholder="" v-model="scope.row.goodsName">
									<el-option v-for="item in $store.state.typeAllList['商品名称']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="180" prop="volume" label="体积">
						<template slot-scope="scope">
							<div>
								<el-input type="number" @input="countGoodsAmount(scope.$index)" v-model="scope.row.volume" size="small" />
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="userName" label="体积单位">
						<template slot-scope="scope">
							<div>
								<el-select clearable size="small" filterable placeholder="" v-model="scope.row.volumeUnit">
									<el-option v-for="item in $store.state.typeAllList['体积单位']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="weight" label="重量">
						<template slot-scope="scope">
							<div>
								<el-input type="number" @input="countGoodsAmount(scope.$index)" v-model="scope.row.weight" size="small" />
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="userName" label="重量单位">
						<template slot-scope="scope">
							<div>
								<el-select clearable size="small" filterable placeholder="" v-model="scope.row.weightUnit">
									<el-option v-for="item in $store.state.typeAllList['重量单位']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="180" prop="unitPrice" label="单价">
						<template slot-scope="scope">
							<div>
								<el-input type="number" @input="countGoodsAmount(scope.$index)" v-model="scope.row.unitPrice" size="small" />
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="userName" label="计价方式">
						<template slot-scope="scope">
							<div>
								<el-select clearable size="small" filterable placeholder="" @input="countGoodsAmount(scope.$index)" v-model="scope.row.pricingMethod">
									<el-option v-for="item in $store.state.typeAllList['计价方式']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="userName" label="装运方式">
						<template slot-scope="scope">
							<div>
								<el-select clearable size="small" filterable placeholder="" @change="loadingMethodChange(scope.$index)" v-model="scope.row.shipmentType">
									<el-option v-for="item in $store.state.typeAllList['装运方式']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="quantity" label="根数">
						<template slot-scope="scope">
							<div>
								<el-input :disabled="scope.row.shipmentType != '散装'" v-model="scope.row.quantity" type="number" size="small" />
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="containerQuantity" label="货柜数">
						<template slot-scope="scope">
							<div>
								<el-input :disabled="scope.row.shipmentType != '集装箱'" v-model="scope.row.containerQuantity" size="small" type="number" />
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="userName" label="货柜尺寸">
						<template slot-scope="scope">
							<div>
								<el-select clearable size="small" filterable placeholder="" :disabled="scope.row.shipmentType != '集装箱'" v-model="scope.row.containerSize">
									<el-option v-for="item in $store.state.typeAllList['货柜尺寸']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="userName" label="扣尺方法">
						<template slot-scope="scope">
							<div>
								<el-select clearable size="small" filterable placeholder="" v-model="scope.row.deductionMethod">
									<el-option v-for="item in $store.state.typeAllList['扣尺方法']" :key="item.id" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="amount" label="小计金额">
						<template slot-scope="scope">
							<div>
								<el-input type="number" v-model="scope.row.amount" size="small" />
								<!-- {{ scope.row.amount }} -->
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作" v-if="$store.state.operateShow" width="80px" fixed="right">
						<template slot-scope="scope">
							<div class>
								<div @click="del('contractGoodsDTOList', scope.$index)" class="clickText">
									删除
								</div>
							</div>
							<!-- <el-button @click="del('list2',scope.row.guid)" slot="reference">删除</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				<!-- 商品列表end -->
			</div>
			<div class="addContract-block" v-if="type == 'edit'&&submitArray.status == '已确认'">
				<!-- 商品列表 -->

				<div class="meTableHead flex-alignCenter flex-between">
					<div>合同商品列表</div>

				</div>
				<el-table :data="submitArray.contractGoodsDTOList" style="width: 100%" border show-summary :summary-method="getSummaries">
					<el-table-column align="center" width="100" prop="goodsType" label="商品类型">

					</el-table-column>
					<el-table-column align="center" width="100" prop="goodsName" label="商品名称" :width="flexColumnWidth('goodsName',submitArray.contractGoodsDTOList)">

					</el-table-column>
					<el-table-column align="center" width="180" prop="volume" label="体积">

					</el-table-column>
					<el-table-column align="center" width="100" prop="volumeUnit" label="体积单位">

					</el-table-column>
					<el-table-column align="center" width="100" prop="weight" label="重量">

					</el-table-column>
					<el-table-column align="center" width="100" prop="weightUnit" label="重量单位">

					</el-table-column>
					<el-table-column align="center" width="180" prop="unitPrice" label="单价">

					</el-table-column>
					<el-table-column align="center" width="100" prop="pricingMethod" label="计价方式">

					</el-table-column>
					<el-table-column align="center" width="100" prop="shipmentType" label="装运方式">

					</el-table-column>
					<el-table-column align="center" width="100" prop="quantity" label="根数">

					</el-table-column>
					<el-table-column align="center" width="100" prop="containerQuantity" label="货柜数">

					</el-table-column>
					<el-table-column align="center" width="100" prop="containerSize" label="货柜尺寸">

					</el-table-column>
					<el-table-column align="center" width="100" prop="deductionMethod" label="扣尺方法">

					</el-table-column>
					<el-table-column align="center"  prop="amount" label="小计金额">

					</el-table-column>

				</el-table>
				<!-- 商品列表end -->
			</div>
			<div class="addContract-block" v-if="type == 'edit'">
				<div class="meTableHead flex-alignCenter flex-between">
					<div>合同修改记录</div>
					<div class="flex-center cursor" style="color: #298ff7" @click="addList('contractUpdateJson')">
						<img src="@/assets/icon/add.png" class="button-icon" alt />新增
					</div>
				</div>
				<el-table :data="submitArray.contractUpdateJson" style="width: 100%" border>
					<el-table-column align="center" prop="userName" label="修改时间">
						<template slot-scope="scope">
							<div>
								<el-date-picker v-model="scope.row.updateTime" type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd">
								</el-date-picker>
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" prop="userName" label="修改内容">
						<template slot-scope="scope">
							<div>
								<el-input type="textarea" v-model="scope.row.remarks" placeholder="" size="small" />
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="操作" v-if="$store.state.operateShow" width="200px" fixed="right">
						<template slot-scope="scope">
							<div class>
								<div @click="del('contractUpdateJson', scope.$index)" class="clickText">
									删除
								</div>
							</div>
							<!-- <el-button @click="del('list2',scope.row.guid)" slot="reference">删除</el-button> -->
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="addContract-block" v-if="type == 'edit'">
				<div class="meTableHead flex-alignCenter flex-between">
					<div>合同收付款记录</div>
				</div>
				<el-table :data="submitArray.contractPaymentCollectionList" style="width: 100%" border show-summary :summary-method="getSummaries2">
					<el-table-column label="银行名称" prop="bankName"></el-table-column>
					<el-table-column label="金额" prop="amount"></el-table-column>
					<el-table-column label="编号" prop="code" width="120"></el-table-column>
					<el-table-column label="日期" prop="date"></el-table-column>
					<el-table-column label="类型" prop="type"></el-table-column>
				</el-table>
			</div>
			<div class="flex-center" style="margin: 20px 0">
				<el-button size="small" @click="submit" type="primary">提交</el-button>
				<el-button class size="small" @click="$router.back()" type>
					<div class="flex-center">取消</div>
				</el-button>
			</div>
		</div>
		<uploads ref="uploads" :dialogVisible="dialogVisible2" uploadType="合同文件" :mulitpleUploadIndex="mulitpleUploadIndex" @close="closeDialog" @handleAdd="handleAdd" @handleRemove="handleRemove" :list="submitArray[mulitpleUploadIndex]"></uploads>
	</div>
</template>
<script>
import Uploads from '@/components/common/uploads';

export default {
	components: {
		Uploads,
	},
	data() {
		return {
			type: 'add', //add 新增 edit:编辑
			submitArray: {
				contractGoodsDTOList: [],
				contractBillRequireJson: [],
				contractOtherClauseJson: [],
				contractApproveBookJson: [],
				contractAttachmentsJson: [],
				contractUpdateJson: [],
				type: '国际',
				companyName: '',
			},
			selectAllList: {
				companyNameList: [], //公司名称列表
				companyGroupNameList: [], //公司分组名称列表
				BZ_List: [],
				YCDG_List: [],
				FKFS_List: [],
				JGTK_List: [],
				ZHG_List: [],
				MDG_List: [],
				MYFS_List: [],
				YBZT_List: ['未预保', '已预保', '无需投保'],
				SPLX_List: [],
				SPMC_List: [],
				TJDW_List: [],
				ZLDW_List: [],
				JJFS_List: [],
				ZYFS_List: [],
				HGCC_List: [],
				KCFF_List: [],
				DJLX_List: [],
			},
			totalOption: [
				{ label: '小计金额', unit: '' },
				{ label: '体积', unit: '' },
				{ label: '重量', unit: '' },
				{ label: '根数', unit: '' },
			],
			dialogVisible2: false,
			mulitpleUploadIndex: 0,
			uploadsList: [],
		};
	},
	created() {
		this.init();
		if (this.$route.query.id) {
			this.type = 'edit';
			this.selectById_contract();
		}
		this.submitArray.type = this.$route.query.type;
	},
	methods: {
		getSummaries2(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				}
				if (index != 1) {
					return; //不合计除了1
				}
				const values = data.map((item) =>
					Number(item[column.property])
				);
				if (!values.every((value) => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						} else {
							return prev;
						}
					}, 0);
					// sums[index] += ' 元';

					sums[index] = sums[index].toFixed(2);
				} else {
					// sums[index] = 'N/A';
				}
			});
			console.log('sums', sums);

			return sums;
		},
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				}
				if (
					index != 2 &&
					index != 4 &&
					index != 9 &&
					index != 10 &&
					index != 13
				) {
					return; //不合计除了6
				}
				const values = data.map((item) =>
					Number(item[column.property])
				);
				if (!values.every((value) => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						} else {
							return prev;
						}
					}, 0);
					// sums[index] += ' 元';
					if (index != 2) {
						sums[index] = sums[index].toFixed(2);
					} else {
						sums[index] = sums[index].toFixed(3);
					}
				} else {
					// sums[index] = 'N/A';
				}
			});
			console.log('sums', sums);

			return sums;
		},
		importGoods_contract(fileList) {
			console.log(fileList.file);
			let formFile = new FormData();
			formFile.append('file', fileList.file);
			this.$myApi
				.importGoods_contract(formFile)
				.then((res) => {
					console.log(111, res);
					this.importResult = res;
					let enc = new TextDecoder('utf-8');
					let list = JSON.parse(enc.decode(new Uint8Array(res.data)));
					console.log(list);
					// this.$refs.plTable.reloadData(list.data); //基础虚拟 解决多数据导入卡顿
					this.submitArray.contractGoodsDTOList = list.data;
				})
				.catch((err) => {
					console.log(err);
					this.$message.error('上传失败，请查看具体文件');
					let enc = new TextDecoder('utf-8');
					// const fileName = res.headers['content-disposition'].substring(21)
					const url = window.URL.createObjectURL(
						new Blob([this.importResult.data])
					);
					const link = document.createElement('a');
					link.href = url;
					link.setAttribute('download', '失败原因.xlsx');
					document.body.appendChild(link);
					link.click();
					URL.revokeObjectURL(link.href); //释放url
					document.body.removeChild(link);
				});
		},
		companyGroupNameChange() {
			this.submitArray.companyName = '';
			this.companyNameList_company();
		},
		preInsuranceStatusChange() {
			var submitArray = this.submitArray;
			if (
				submitArray.tradeType == '一般贸易' &&
				submitArray.priceClause != 'CIF' &&
				submitArray.priceClause != 'CIP'
			) {
				submitArray.preInsuranceStatus = '未投保';
			} else if (
				submitArray.tradeType == '转口贸易' &&
				submitArray.priceClause == 'CIF' &&
				submitArray.priceClause == 'CIP'
			) {
				submitArray.preInsuranceStatus = '未投保';
			} else {
				submitArray.preInsuranceStatus = '无需投保';
			}
		},
		import_template_contract() {
			this.$myApi.import_template_contract().then((res) => {
				console.log(res);
				this.downLoad(res);
			});
		},
		handleAvatarSuccess(e) {
			console.log(e);
			if (e.code == 200) {
				this.$message({
					message: e.message,
					type: 'success',
				});
				this.submitArray.contractGoodsDTOList = e.data;
			} else {
				this.$message.error(e.message);
			}
		},
		handleRemove(file) {
			console.log(file);
			var mulitpleUploadIndex = this.mulitpleUploadIndex;

			this.submitArray[mulitpleUploadIndex].map((item, index) => {
				if (file.uid == item.uid) {
					this.submitArray[mulitpleUploadIndex].splice(index, 1);
				}
			});
		},
		handleAdd(fileList, response) {
			console.log(fileList);
			var index = this.mulitpleUploadIndex;
			var arr = [];
			fileList.map((item) => {
				if (item.type != 1) {
					arr.push({
						url: item.response.data,
						name: item.name,
						uid: item.uid,
						type: 1,
					});
				} else {
					arr.push(item);
				}
			});
			this.submitArray[index] = arr;
		},

		closeDialog() {
			this.dialogVisible2 = false;
		},
		mulitpleUpload(index) {
			this.mulitpleUploadIndex = index;
			this.dialogVisible2 = true;
		},
		countGoodsAmount(index) {
			var arr = this.submitArray['contractGoodsDTOList'];
			var number = 0;
			if (arr[index].pricingMethod == '体积') {
				number = arr[index].volume;
			} else if (arr[index].pricingMethod == '重量') {
				number = arr[index].weight;
			} else if (arr[index].pricingMethod == '集装箱') {
				number = arr[index].containerQuantity;
			}
			arr[index].amount = (arr[index].unitPrice * number).toFixed(2);
			// this.$forceUpdate()
		},
		loadingMethodChange(index) {
			this.submitArray['contractGoodsDTOList'][index].quantity = null;
			this.submitArray['contractGoodsDTOList'][index].containerQuantity =
				null;
			this.submitArray['contractGoodsDTOList'][index].containerSize =
				null;
			// this.$forceUpdate()
		},
		del(name, index) {
			console.log(name, index);
			this.$confirm('是否确认删除所选数据, 删除后不可恢复', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then((e) => {
					this.submitArray[name].splice(index, 1);
				})
				.catch((e) => {
					console.log(this, e);
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		init() {
			this.companyGroupNameList_company();
		},
		//增加数组对象
		addList(name) {
			var arr = this.submitArray[name];
			console.log('addList', name, arr);
			if (name == 'contractGoodsDTOList') {
				arr.push({
					guid: this.guid(),
					volume: null,
					unitPrice: null,
					weight: null,
					quantity: null,
					containerQuantity: null,
					containerSize: null,
					amount: null,
				});
				// this.$refs.plTable.reloadData(this.submitArray.contractGoodsDTOList); //基础虚拟 解决多数据导入卡顿
			} else {
				arr.push({
					guid: this.guid(),
				});
			}
		},
		//获取合同信息
		selectById_contract(row) {
			var params = {
				id: this.$route.query.id,
			};
			this.$myApi.selectById_contract(params).then((res) => {
				if (res.code == 200) {
					res.data.contractGoodsDTOList = res.data.contractGoodsList;
					res.data.deliveryPort = res.data.deliveryPort
						? res.data.deliveryPort.split(',')
						: '';
					res.data.loadingPort = res.data.loadingPort
						? res.data.loadingPort.split(',')
						: '';
					res.data.originalCountry = res.data.originalCountry
						? res.data.originalCountry.split(',')
						: '';
					res.data.paymentType = res.data.paymentType
						? res.data.paymentType.split(',')
						: '';
					this.submitArray = this.Json_Array(res.data, 'toJson'); //检索所有JSON字段 转换格式

					this.submitArray = res.data;
					this.companyNameList_company();
					// this.$refs.plTable.reloadData(this.submitArray.contractGoodsDTOList); //基础虚拟 解决多数据导入卡顿
				}
			});
		},
		submit() {
			if (!this.submitArray.contractCode) {
				this.$message.error('请补充合同号');
				return;
			}
			if (!this.submitArray.companyGroupName) {
				this.$message.error('请补充公司分组名称');
				return;
			}
			if (!this.submitArray.companyName) {
				this.$message.error('请补充公司名称');
				return;
			}
			if (!this.submitArray.contractSignedDate) {
				this.$message.error('请补充合同签订日期');
				return;
			}
			if (this.type == 'edit') {
				if (!this.submitArray.contractGoodsDTOList.length) {
					this.$message.error('请补充合同商品列表');
					return;
				}
			}
			var params = this.cloneObjectFn(this.submitArray);
			console.log(params);
			if (params.type == '国际') {
				params.deliveryPort = params.deliveryPort.join(',');
				params.loadingPort = params.loadingPort.join(',');
				params.originalCountry = params.originalCountry.join(',');
			}
			if (params.paymentType) {
				params.paymentType = params.paymentType.join(',');
			}
			if (this.type == 'add') {
				this.Json_Array(params, 'toString'); //检索所有JSON字段 转换格式
				this.$myApi.insert_contract(params).then((res) => {
					if (res.code == 200) {
						this.$message({
							message: '操作成功',
							type: 'success',
						});

						this.$router.back();
					}
				});
			} else if (this.type == 'edit') {
				params.approveBookCount = params.contractApproveBookJson.length;
				params.attachmentsCount = params.contractAttachmentsJson.length;
				params.billRequiredCount =
					params.contractBillRequireJson.length;
				params.contractUpdateCount = params.contractUpdateJson.length;

				delete params.contractGoodsList;
				this.Json_Array(params, 'toString'); //检索所有JSON字段 转换格式
				this.$myApi.update_contract(params).then((res) => {
					if (res.code == 200) {
						this.$message({
							message: '操作成功',
							type: 'success',
						});
						this.selectById_contract();
						this.$router.back();
						// this.$router.push({ path: "/contract/List" });
					}
				});
			}
		},
		querySearch(queryString, cb) {
			var companyNameList = this.companyNameList; //查询列表
			var results = queryString
				? companyNameList.filter(this.createFilter(queryString))
				: companyNameList;

			// 调用 callback 返回建议列表的数据
			cb(results);
		},
		createFilter(queryString) {
			return (restaurant) => {
				return (
					restaurant
						.toLowerCase()
						.indexOf(queryString.toLowerCase()) === 0
				);
			};
		},

		companyGroupNameList_company(pageNum) {
			this.$myApi.companyGroupNameList_company().then((res) => {
				if (res.code == 200) {
					this.selectAllList.companyGroupNameList = res.data;
				}
			});
		},
		companyNameList_company(pageNum) {
			var params = {
				pageSize: 9999,
				groupName: this.submitArray.companyGroupName,
			};
			this.$myApi.companyNameList_company(params).then((res) => {
				if (res.code == 200) {
					this.selectAllList.companyNameList = res.data;
				}
			});
		},
	},
};
</script>
<style lang="" scoped>
.price {
	margin: 0 20px;
}
.title2Wrap {
	margin-top: 20px;
	margin-bottom: 10px;
}
.title2 {
	padding: 3px 7px;
	border-left: 2px solid #298ff7;
	margin-right: 20px;
}
#addContract {
	font-size: 12px;
}
.title {
	font-size: 30px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	line-height: 81px;
	text-align: center;
	padding-top: 0px;
}
</style>